<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper-box">
			<swiper lass="screen-swiper round-dot" indicator-dots="true"  circular="true" autoplay="true">
				<swiper-item v-for="(swiper,index) in swiperList" :key="index">
					<image :src="swiper" @tap="preImage" :data-src="swiper" :data-index="index" :data-srcs="swiperList"></image>
				</swiper-item>
			</swiper>
		</view>
		<detail-item :options="buldingInfo.house"></detail-item>
		<view class="cu-list grid col-4 no-border toolbar">
			<navigator class="cu-item" url="/pages/map/map">
				<view class="lg text-white cuIcon-location">
				</view>
				<text>地图找房</text>
			</navigator>
			<navigator class="cu-item" :url="'/pages/sale/detail/ask?id='+buldingInfo.house.id">
				<view class="lg text-white cuIcon-question">
				</view>
				<text>房源评论</text>
			</navigator>
			<navigator class="cu-item" :url="'/pages/sale/detail/detail-info?id='+buldingInfo.house.id">
				<view class="lg text-white cuIcon-form">
				</view>
				<text>房源详情</text>
			</navigator>
			<navigator class="cu-item" :url="'/pages/new/detail/images?thumb_url='+buldingInfo.house.thumb_url
			+'&thumb_1='+buldingInfo.house.thumb_1
			+'&thumb_2='+buldingInfo.house.thumb_2
			+'&thumb_3='+buldingInfo.house.thumb_3">
				<view class="lg text-white cuIcon-pic">
				</view>
				<text>楼盘图片</text>
			</navigator>
		</view>
		<view class="margin-top flex flex-row cu-item menu-avatar xiaoshou" style="background:white;padding:5px;">
			<view class="flex align-center">
				<image class="cu-avatar round lg" src="../../../static/img/logo.jpg"></image>
			</view>
			<view class="content flex-sub">
				<view class="text-bold"  v-if="buldingInfo.house.name!=null&&buldingInfo.house.name!=''">
					{{buldingInfo.house.name}}
				</view>
				<view class="text-red" v-if="buldingInfo.house.fxmoney!=null&&buldingInfo.house.fxmoney!=''">佣金：{{buldingInfo.house.fxmoney}}</view>
				<view  v-if="buldingInfo.house.tel!=null&&buldingInfo.house.tel!=''">{{buldingInfo.house.tel}}</view>
			</view>
			<view class="flex align-center"  v-if="buldingInfo.house.tel!=null&&buldingInfo.house.tel!=''">

				<button class="cu-btn block line-orange lg"  @tap="call" :data-tel="buldingInfo.house.tel"><text class="cuIcon-phone"></text>拨打电话</button>
			</view>
		</view>
		<view class="cu-bar bg-white margin-top solid-bottom">
			<view class="action"><text class="cuIcon-titles text-red"></text>房源配套</view>
		</view>
		<view class="flex flex-row bg-white align-center padding">
			
			<text class="cu-tag bg-green" v-for="(item, index) in specialtys"  :key="index">{{item}}</text>

		</view>

		<view class="cu-bar bg-white margin-top solid-bottom">
			<view class="action"><text class="cuIcon-title text-blue"></text>基本参数</view>
		</view>
		<view class="cu-list bg-white basic-detail">
			<view  v-if="buldingInfo.house.letway!=''&buldingInfo.house.letway!=null"  class="cu-item solid-bottom "><text class="text-grey">租/售：</text>{{buldingInfo.house.letway==1?"租":"售"}}</view>
			<view v-if="buldingInfo.house.money!=''&buldingInfo.house.money!=null"  class="cu-item solid-bottom "><text class="text-grey">{{buldingInfo.house.letway==1?"租金":"售价"}}：</text>{{buldingInfo.house.money}}</view>
			<view v-if="buldingInfo.house.letfxmoneyway!=''&buldingInfo.house.fxmoney!=null" class="cu-item solid-bottom "><text class="text-grey">佣金：</text>{{buldingInfo.house.fxmoney}}</view>
			<view v-if="buldingInfo.house.roomtype!=''&buldingInfo.house.roomtype!=null" class="cu-item solid-bottom "><text class="text-grey">房型：</text>{{buldingInfo.house.roomtype}}</view>
			<view v-if="buldingInfo.house.housetype!=''&buldingInfo.house.housetype!=null" class="cu-item solid-bottom "><text class="text-grey">房源类型：</text>{{buldingInfo.house.housetype}}</view>
			<view v-if="buldingInfo.house.payway!=''&buldingInfo.house.payway!=null" class="cu-item solid-bottom "><text class="text-grey">付款方式：</text>{{buldingInfo.house.payway}}</view>
			<view v-if="buldingInfo.house.area!=''&buldingInfo.house.area!=null" class="cu-item solid-bottom "><text class="text-grey">房源面积：</text>{{buldingInfo.house.area}}</view>
			<view v-if="buldingInfo.house.decorate!=''&buldingInfo.house.decorate!=null" class="cu-item solid-bottom "><text class="text-grey">装修程度：</text>{{buldingInfo.house.decorate}}</view>
			<view v-if="buldingInfo.house.floor!=''&buldingInfo.house.floor!=null" class="cu-item solid-bottom "><text class="text-grey">楼层：</text>{{buldingInfo.house.floor}}</view>
		</view>


		<view class="cu-bar bg-white margin-top solid-bottom">
			<view class="action"><text class="cuIcon-titles text-red"></text>全部评论</view>
			<text class="text-right">更多>></text>
		</view>
		<comment-item :comments="buldingInfo.comments"></comment-item>
		<view class="flex  padding justify-center bg-white">
			<navigator class="cu-btn round bg-grey center" :url="'/pages/comment/create?id='+buldingInfo.house.id">发表评论</navigator>
		</view>

		<view style="height:40px;"> </view>
		<view class="bottom">
			<button class="bg-gray flex flex-row justify-center  padding " open-type="contact" style="flex:1">
				<text class="cuIcon-message text-green lg"></text>
				<text>联系客服</text>
			</button>
			<button class="bg-green flex justify-center  padding" @tap="call" :data-tel="buldingInfo.house.tel" style="flex:1">立即联系</button>
		</view>
		<view class="cu-load load-modal" v-if="isLoading">
			<view class="cuIcon-emojifill text-orange"></view>
			<view class="gray-text">{{loadMoreDefalutText}}</view>
		</view>
	</view>
</template>

<script>
	import detailItem from './detail-item.vue';
	import promotionList from '../../../pages/index/promotion-list.vue';

	import commentItem from '@/pages/comment/item.vue';

	export default {
		components: {
			detailItem,
			promotionList,
			commentItem
		},
		data() {
			return {
				id: 0,
				// 轮播图片
				swiperList: [],
				specialtys:[],
				salers: [],
				buldingInfo: {},
				imgRoot: this.$rootUrl,
				oldImgRoot:this.$oldImgRoot,
				isLoading:true,
				loadMoreDefalutText: '努力加载中...',
				loadMoreNoLeftText: '没有更多了,请掉头行驶...',
				connectionFailText: '连接失败,请检查网络是否断开!',
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.loadDetailInfo();
		},
		onShareAppMessage(){
			return {
			      title: '选楼盘，查佣金，看房价'
			    }
		},
		methods: {
			preImage(e) {
				var me=this;
				var srcs=e.currentTarget.dataset.srcs;
				var index=e.currentTarget.dataset.index;
				uni.previewImage({
					urls: srcs,
					current:index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toDetailInfo(info) {
				uni.navigateTo({
					url: '/pages/new/detail/detail-info'
				})
			},
			toAskList(info) {
				uni.navigateTo({
					url: '/pages/new/detail/ask'
				})
			},
			toImages(info) {
				uni.navigateTo({
					url: '/pages/new/detail/images'
				})
			},
			toMap() {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},
			loadDetailInfo() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/House/FindDetail',
					data: {
						id: me.id
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.buldingInfo = res.data.data;
							if(me.buldingInfo.house.special!=null&&me.buldingInfo.house.special!="")
							{
								me.specialtys= me.buldingInfo.house.special.split(',');
							}
							
							if(me.buldingInfo.house.thumb_url!=null)
							{
								me.buldingInfo.house.thumb_url.split(",").forEach(function(item){
									item=(item.indexOf('Attachment')!=-1?me.imgRoot:me.oldImgRoot)+item;
									me.swiperList.push(item);
								})
							}
							me.isLoading=false;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			},
			call(e) {
			    
				var tel=e.currentTarget.dataset.tel
				uni.makePhoneCall({
				    phoneNumber: tel 
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
	
		.swiper-box {
			width: 100%;
			//height: 30.7vw;

			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 40.7vw;

				swiper-item {
					image {
						width: 100%;
						//height: 30.7vw;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				button{
					line-height: 1;
					border-radius: 5px;
				}
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}
	

		.toolbar {
			margin-top: 4px;


			.cu-item {
				padding: 10px 15px;
				width:25%;
				.text-white {
					font-size: 30px;
					background-color:  #D1372C;
					color: white;
					border-radius: 40%;
					height: 50px;
					line-height: 50px;
				}
			}

		}
		.basic-detail {
			margin-top: 4px;
		
		
			.cu-item {
				padding: 10px 15px;
				.text-white {
					font-size: 30px;
					background-color: #007AFF;
					color: white;
					border-radius: 40%;
					height: 50px;
					line-height: 50px;
				}
			}
		
		}

		.xiaoshou {
			view {
				padding: 2px;
			}
		}

		.zhuchangList {
			padding: 10px;
			justify-content: space-between;

			.zhuchang {
				background: #EBD4EF;
				border-radius: 20px;
				width: 32%;
				padding: 10px;
			}

		}

		.bottom {
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: row;
			width: 100%;
			text-align: center;
			align-content: center;
			button{
				line-height: 1;
				border-radius: 0;
			}
		}
	}
</style>
